<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <!--      搜索组件-->
      <div style="display: flex;align-items: center;">
        <SearchModle dataKey="forum" @searchFn="searchFn"></SearchModle>
        <el-button @click="handleEdit()" size="small" class="ml-10">添加论坛版块</el-button>
        <el-button type="danger" size="small" :disabled="handleSelection.length==0?true:false"
                   @click="detelTearch(2)">
          批量删除
        </el-button>
      </div>
      <el-table
        border
        ref="multipleTable"
        :data="arryList"
        :stripe="tableStyle.tableStripe"
        :border="tableStyle.tableBorder"
        tooltip-effect="dark"
        style="width: 100%"
        header-cell-class-name="table-text-c"
        cell-class-name="table-text-c"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="版块名称">
        </el-table-column>
        <el-table-column
          align="center"
          label="版主">
          <template slot-scope="scope">
            {{ scope.row.user.realname }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="审核人">
          <template slot-scope="scope">
            {{ scope.row.examine.realname }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="description"
          label="版块简介">
        </el-table-column>
        <el-table-column
          align="center"
          prop="postings_number"
          label="文章数">
        </el-table-column>
        <el-table-column
          label="操作"
          width="160"
          align="center">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
            <span @click="detelTearch(1,scope.$index)" class="button-defult c-danger">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <menuDetail :visible.sync="menuDetailVisible" :forumId="forumId" @InitFn="InitFn"></menuDetail>
  </div>
</template>

<script>
import addUser from '@/components/dialog/addUser.vue'
import tearchGetClass from '@/components/dialog/tearchGetClass.vue'
import {pagination, tableoption} from '@/utils/util.js'
import menuDetail from "./menuDetail";

export default {
  components: {
    addUser,
    tearchGetClass,
    menuDetail
  },
  data() {
    return {
      // 设置table样式
      tableStyle: tableoption,
      arryList: [], // 数据列表
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      handleSelection: [],
      // 搜索组件
      searchForm: {},
      menuDetailVisible: false,
      forumId: 0
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.searchForm.p = this.page.pageindex
      this.$fetch(this.api.forum_plate_index, this.searchForm).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    detelTearch(type, index) {
      let name = ''
      // type 1 删除单个 2 批量删除
      if (type === 1) {
        name = this.arryList[index].name
      } else {
        for (let i in this.handleSelection) {
          name += (this.handleSelection[i].name + ',')
        }
      }
      this.$confirm('确认删除，将永久删除 ' + name + ' 版块, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(type, index)
      }).catch(() => {
      })
    },
    detelRespon(type, index) {
      // type 1 单独 2 批量
      let option_ = []
      let data_ = {}
      if (type === 2) {
        for (let i in this.handleSelection) {
          option_.push(this.handleSelection[i].id)
        }
        data_.id = option_.join(',')
      } else {
        data_.id = this.arryList[index].id
      }
      this.$post(this.api.forum_plate_delete, data_).then((response) => {
        if (response.code === 0) {
          if (type === 1) {
            this.arryList.splice(index, 1)
          } else {
            this.InitFn()
          }

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 搜索组件
    searchFn(option) {
      this.page.pageindex = 1
      this.searchForm = option
      this.InitFn()
    },
    // 编辑
    handleEdit(row) {
      // let id = row || ''
      // this.$router.push('/editmenulist?editId=' + id)
      this.forumId = row || 0
      this.menuDetailVisible = true
    },
  },
  mounted() {
  },
}
</script>
